<template>
    <t-breadcrumb :max-item-width="'150'" style="margin-bottom: 10px;">
        <t-breadcrumb-item> {{ $t('layout.aside.photographArea') }} </t-breadcrumb-item>
        <t-breadcrumb-item> {{ $t('layout.aside.photograph') }}</t-breadcrumb-item>
    </t-breadcrumb>
    <t-space direction="horizontal">
        <span>{{ $t('common.name') }}:</span>
        <t-input style="width: 140px;" size='small' v-model="searchValue.searchName" clearable
            :placeholder="$t('common.input.name')"></t-input>
        {{ $t('photograph.type.type') }}:
        <t-select style="width: 140px;" size='small' v-model="searchValue.searchValue" placeholder="请选择">
            <t-option v-for="type in types" :key="type.id" :label="type.name" :value="type.id" />
        </t-select>
        <t-button @click="getPhotographs" size="small">{{ $t('common.button.search') }}</t-button>
    </t-space>
    <t-table style="margin-top: 10px;" height="calc(100vh - 333px)" :pagination="pagination" size="small"
        row-key="index" :data="datas" :columns="columns">
        <template #fileShowId="{ row }">
            <t-image :src="api.show + row.fileShowId" width="100" height="100" />
        </template>
        <template #creationTime="{ row }">
            {{ row.creationTime.replace('T', ' ').substr(0, 19) }}
        </template>
        <template #operation="{ row }">
            <t-link theme='primary' @click="details(row)">
                {{ $t('common.button.details') }}
            </t-link> &nbsp;
            <t-popconfirm theme="default" content="确认删除作品吗" @confirm="del(row)">
                <t-link theme='danger' >
                {{ $t('common.button.delete') }}
            </t-link>
    </t-popconfirm>
            
        </template>
    </t-table>

    <t-dialog v-model:visible="detailVisible">
        <p>作者：{{ data.appUserNickName }}</p>
        <p>标题：{{ data.name }}</p>
        <p>描述：{{ data.description }}</p>
        <p>类型：{{ data.photographTypeName }}</p>
        <p>发布时间：{{ data.creationTime?data.creationTime.replace('T', ' ').substr(0, 19):'' }}</p>
        <p>浏览次数：{{ data.watchCount }}</p>
        <p>点赞次数：{{ data.likeCount }}</p>
        <p>收藏次数：{{ data.starCount }}</p>
        <div class="tdesign-demo-image-viewer__base">

            <t-image-viewer v-for="(img,index) in imgs" :closeOnOverlay="true" :showOverlay="true" :key="index" v-model:visible="visibles[index]" :default-index="index" :images="imgs">
                <template #trigger>
                    <div class="tdesign-demo-image-viewer__ui-image tdesign-demo-image-viewer__base">
                        <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
                        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen(index)">
                            <span>
                                <BrowseIcon size="1.4em" /> 预览
                            </span>
                        </div>
                    </div>
                </template>
            </t-image-viewer>
        </div>
    </t-dialog>


</template>

<script setup>
import api from './api'
import { ref } from 'vue'


const searchValue = ref({
    pageIndex: 1,
    pageSize: 10,
    searchValue: 0,
    searchName: '',
    total: 0
})
const pagination = ref({
    defaultPageSize: 20,
    total: 0,
    defaultCurrent: 1,
    size: 'small'
})
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = [{ colKey: 'name', title: t('photograph.name'), align: 'center' },
{ colKey: 'appUserNickName', title: t('photograph.author'), align: 'center' },
{ colKey: 'photographTypeName', title: t('photograph.type.type'), align: 'center' },
{ colKey: 'description', title: t('photograph.description'), align: 'center' },
{ colKey: 'fileShowId', title: t('photograph.showImage'), align: 'center' },
// { colKey: 'filesIds', title: t('photograph.detailImage'),align:'center' }, 
{ colKey: 'photographTypeName', title: t('photograph.type.type'), align: 'center' },
{ colKey: 'creationTime', title: t('common.creationTime'), width: '160', align: 'center' },
{ colKey: 'watchCount', title: t('statistics.watchCount'), width: '60', align: 'center' },
{ colKey: 'likeCount', title: t('statistics.likeCount'), width: '60', align: 'center' },
// {colKey: 'commentCount',title: t('statistics.commentCount')},
{ colKey: 'starCount', title: t('statistics.starCount'), width: '60', align: 'center' },

{ colKey: 'operation', title: t('common.operation'), width: '160', align: 'center' }]
const datas = ref([])
const types = ref([])
const getPhotographTypes = () => {
    api.getPhotographTypes().then(res => {
        if (res.successed) {
            types.value = res.datas
            types.value.unshift({ id: 0, name: '全部' })
            console.log(types.value)
        }
    })
}
getPhotographTypes()
const getPhotographs = () => {
    searchValue.value.pageIndex = pagination.value.defaultCurrent
    searchValue.value.pageSize = pagination.value.defaultPageSize
    api.getPhotographs(searchValue.value).then(res => {
        if (res.successed) {
            datas.value = res.datas
            pagination.value.total = res.total
            console.log(datas.value)

        }
    })

}
getPhotographs()


const data = ref({})
const detailVisible = ref(false)
const imgs = ref([])
const details = (row) => {
    console.log(row)
    data.value = row
    let files = row.filesIds.split(',')
    imgs.value = []
    visibles.value = []
    files.forEach(item => {
        imgs.value.push(api.show + item)
        visibles.value.push(false)
    })
    detailVisible.value = true
}
import { BrowseIcon } from 'tdesign-icons-vue-next';
const visibles = ref([])
const onOpen = (index) => (visibles.value[index] = true);

const del = (row) => {
    api.deletePhotograph(row.id).then(res => {
        if (res.successed) {
            getPhotographs()
        }
    })
}

</script>
<style scoped>
.tdesign-demo-image-viewer__ui-image {
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--td-radius-small);
    overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--td-text-color-anti);
    line-height: 22px;
    transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
    opacity: 1;
    cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
    padding: 0 16px;
    height: 56px;
    width: 100%;
    line-height: 56px;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    color: var(--td-text-color-anti);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
    flex: 1;
}

.tdesign-demo-popup__reference {
    margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
    cursor: pointer;
}

.tdesign-demo-image-viewer__base {
    width: 160px;
    height: 160px;
    margin: 10px;
    border: 4px solid var(--td-bg-color-secondarycontainer);
    border-radius: var(--td-radius-medium);
}
</style>